<template>
	<view class="content">
		<view class="topbox">
			<view class="topname">
				<image v-if="userinfo.avatar_file == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
				<image v-else class="face" :src="'https://www.yedushu.cn/' + userinfo.avatar_file"></image>
				<view class="name">
					<text class="nametxt">{{userinfo.user_name}}</text>
				</view>
				<view  v-if="!haslogin" @click="navlogin()" class="dengluzhuce">登录/注册></view>
			</view>
			<navigator v-if="haslogin" :url="'../userhome/userhome?uid=' + userinfo.uid + '&username=' + userinfo.user_name" class="home">
				<text class="hometxt">个人主页</text>
				<image class="homearr" src="../../static/images/ic_diary_forward.png"></image>
			</navigator>
		</view>
		<view v-if="haslogin" class="logout" @click="logout1()">
			<text class="tuichutxt">退出登录</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export  default {
		data () {
			return {
				userinfo: [], // 用户信息
				haslogin: false, // 是否登录
			}
		},
		onShow() {
			// 监听设置昵称页面（setnick.vue）传过来的事件，更新用户昵称显示
			uni.$on("setnick", res => {
			    this.userinfo.user_name = res.username;
			    // 移除全局自定义事件监听器
			    uni.$off('setnick');
			});
		},
		onLoad() {
			// 判断是否登录
			this.haslogin = uni.getStorageSync('haslogin');
			this.userinfo = uni.getStorageSync('userinfo');
		},
		// computed:{
		// 　　...mapState({
		// 　　　　haslogin: ({userlogin})=>userlogin.haslogin, //keyname: ({模块名称})=>模块名称.keyname,
		// 　　})
		// },
		methods: {
			...mapMutations({
				logout: 'userlogin/logout'
			}), 
			logout1() {
				// 退出登录
				this.logout(this.userinfo); // 仓库里的函数
				// 跳转到登录页面
				uni.reLaunch({
				    url: '../login/login'
				});
			},
			navlogin() {
				// 跳转到登录页面
				uni.navigateTo({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #e0e0e0;
	}
	.content {
		display: flex;
		flex-direction: column;		
	}
	.topbox{
		background-color: #FFFFFF;
		padding: 15px 10px;		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.topbox .face {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.topbox .topname {		
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.topbox .topname .name {
		padding-left: 10px;
	}
	.topbox .topname .name .nametxt {		
		font-size: 18px;
		font-weight: 600;
	}
	.topbox .home {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.topbox .hometxt {
		font-size: 14px;
	}
	.topbox .homearr {
		width: 13px;
		height: 13px;
	}
	.logout {
		padding: 10px 10px;
		background-color: #FFFFFF;
		margin-top: 10px;
		text-align: center;
	}
	.logout .tuichutxt {
		font-size: 14px;
	}
	.dengluzhuce {
		font-size: 15px;
	}
</style>
